<template>
    <div class="git-command-container">
        <h2>常见Git命令列表</h2>
        <div class="container git-command-list">
            <ul>
                <li v-for="command in gitCommands" :key="command.name">
                    <strong>{{ command.name }}</strong>:
                    <p>{{ command.description }}</p>
                    <p class="example">示例: {{ command.example }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
const gitCommands = [
    {
        name: 'git init',
        description: '初始化一个本地Git仓库，在当前目录下创建一个.git隐藏文件夹来管理版本信息。',
        example: '在项目根目录下执行 `git init` 即可初始化仓库。'
    },
    {
        name: 'git clone [repository URL]',
        description: '克隆远程仓库到本地，将远程仓库的代码完整地复制到本地指定目录。',
        example: '若要克隆名为 `my-repo` 的远程仓库，执行 `git clone https://github.com/user/my-repo.git`。'
    },
    {
        name: 'git add [file or directory]',
        description: '将指定的文件或目录添加到暂存区，准备提交到本地仓库。可以使用 "." 来添加所有更改的文件。',
        example: '添加单个文件 `git add index.js`，添加所有更改文件 `git add.`。'
    },
    {
        name: 'git commit -m "[commit message]"',
        description: '将暂存区的内容提交到本地仓库，并附上相应的提交说明，描述此次提交的更改内容。',
        example: '提交并添加说明 `git commit -m "修复了登录页面的 bug"`。'
    },
    {
        name: 'git push',
        description: '将本地仓库的提交推送到远程仓库，使远程仓库与本地仓库保持同步更新。',
        example: '将本地 `main` 分支推送到远程同名分支，执行 `git push origin main`。'
    },
    {
        name: 'git pull',
        description: '从远程仓库拉取最新的更改到本地仓库，并尝试自动合并到当前分支。',
        example: '在当前分支拉取最新代码 `git pull origin current-branch`。'
    },
    {
        name: 'git branch',
        description: '查看本地所有分支列表，显示当前所在分支以及其他已创建的分支。',
        example: '直接执行 `git branch` 查看本地分支情况。'
    },
    {
        name: 'git checkout [branch name]',
        description: '切换到指定的分支，可用于在不同分支间进行开发或查看代码。',
        example: '切换到名为 `feature-branch` 的分支，执行 `git checkout feature-branch`。'
    },
    {
        name: 'git merge [branch name]',
        description: '将指定分支合并到当前分支，常用于将其他分支的更改整合到主分支等情况。',
        example: '将 `feature-branch` 合并到 `main` 分支，执行 `git merge feature-branch`。'
    },
    {
        name: 'git status',
        description: '查看当前仓库的状态，显示哪些文件被修改、哪些文件已添加到暂存区等信息。',
        example: '执行 `git status` 查看当前仓库各文件状态。'
    }
];
</script>

<style scoped lang="scss">
@use "../assets/common.scss";

.git-command-list {
    border: 1px solid #ccc;
    border-radius: 5px;
}

.git-command-list h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    color: #333;
}

.git-command-list ul {
    list-style-type: none;
    padding-left: 0;
}

.git-command-list li {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.git-command-list li:last-child {
    border-bottom: none;
}

.git-command-list.example {
    font-style: italic;
    color: #666;
    margin-top: 5px;
}
</style>